<template>
  <main class="h100">
    <iLayout left>
      <section slot="title" class="flex_start">
        <div>
          <el-button @click="$router.go(-1)">←返回断面</el-button>
        </div>
        <div v-if="queryData" class="title">{{queryData.name}} <span class="mini">下的监测单元</span></div>
      </section>
      <section slot="operation">
        <el-button type="primary" @click="addUnitTypeClick">新建单元</el-button>
      </section>
      <section slot="left">
        <el-table :data="unitType" @row-click="unitTypeRowClick" style="width: 100%">
          <el-table-column prop="name" label="单元类型">
          </el-table-column>
        </el-table>
      </section>
      <section slot="right">
        <div v-if="unitList.length" class="rightBodyStyle">
          <el-collapse accordion v-model="collapseValue" @change="collapseChange">
            <el-collapse-item v-for="(item,index) in unitList" :key="index" :name="index">
              <template slot="title">
                <section class="w100 flex_sb" @click="getUnitData(item)">
                  <div class="flex_1 unitName" :title="item.name">{{item.name}}</div>
                  <!-- <div class="flex_1">{{item.type}}</div> -->
                  <!-- <div class="flex_1">
                    <el-tag :type="$store.state.flagOptions[item.flag-0].tagType">{{$store.state.flagOptions[item.flag-0].name}}</el-tag>
                  </div>
                  <div class="flex_1">
                    <el-tag :type="$store.state.stateOptions[item.state-0].tagType">{{$store.state.stateOptions[item.state-0].name}}</el-tag>
                  </div>
                  <div class="flex_1">
                    <el-tag :type="$store.state.statusOptions[item.status-0].tagType">{{$store.state.statusOptions[item.status-0].name}}</el-tag>
                  </div> -->
                  <div style="margin-right:10px">
                    <el-button :disabled="item.state!=0" @click.stop="setUnitClick(item)">单元设置</el-button>
                    <el-button :disabled="item.state!=0" @click.stop="delUnitClick(item)">删除单元</el-button>
                    <el-button :disabled="item.state!=0" @click.stop="exitUnitClick(item)">关闭测量</el-button>
                  </div>
                </section>
              </template>
              <section class="pointBox">
                <el-table v-loading="item.loading" :data="item.pointsList" style="width: 100%" height="90%">
                  <el-table-column prop="name" label="测点名字">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注">
                  </el-table-column>
                  <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                      <el-button :disabled="item.state!=0" type="text" size="small" @click="setPointClick(scope.row,item)">修改</el-button>
                      <el-button :disabled="item.state!=0" type="text" size="small" @click="exitPointClick(scope.row,item)">废弃</el-button>
                      <el-button :disabled="item.state!=0" type="text" size="small" @click="delPointClick(scope.row,item)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button :disabled="item.loading||item.state!=0||(item.type==1&&item.pointsList.length>=1)||(item.type==2&&item.pointsList.length>=2)" style="margin-top:5px" type="primary" class="w100" @click="addPointClick(item)">新建点</el-button>
              </section>
            </el-collapse-item>
          </el-collapse>
        </div>
        <el-empty v-else description="无单元"></el-empty>
      </section>
    </iLayout>
    <!-- 对话框们 -->
    <section>
      <!-- 新建单元对话框 -->
      <el-dialog title="新建单元" :visible.sync="dialog.addUnit" width="50%">
        <div>
          <UnitForm ref="addUnitRef" :fromData="addUnitData"></UnitForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addUnit = false">取 消</el-button>
          <el-button type="primary" @click="addUnitFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 设置单元对话框 -->
      <el-dialog title="设置单元" :visible.sync="dialog.setUnit" width="50%">
        <div>
          <UnitForm :set="true" ref="setUnitRef" :fromData="setUnitData"></UnitForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setUnit = false">取 消</el-button>
          <el-button type="primary" @click="setUnitFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除单元对话框 -->
      <el-dialog title="删除单元" :visible.sync="dialog.delUnit" width="50%">
        <div>
          确定要删除这个单元吗？
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delUnit = false">取 消</el-button>
          <el-button type="primary" @click="delUnitFun">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 关闭单元对话框 -->
      <el-dialog title="关闭测量单元" :visible.sync="dialog.exitUnit" width="50%">
        <div>
          确定关闭这个单元的测量吗?
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.exitUnit = false">取 消</el-button>
          <el-button type="primary" @click="exitUnitFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新建点对话框 -->
      <el-dialog title="新建点" :visible.sync="dialog.addPoint" width="50%">
        <div>
          <PointForm ref="addPointRef" :fromData="addPointData"></PointForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addPoint = false">取 消</el-button>
          <el-button type="primary" @click="addPointFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改点对话框 -->
      <el-dialog title="修改点" :visible.sync="dialog.setPoint" width="50%">
        <div>
          <PointForm ref="setPointRef" :fromData="setPointData"></PointForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setPoint = false">取 消</el-button>
          <el-button type="primary" @click="setPointFun">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 废弃点对话框 -->
      <el-dialog title="废弃点" :visible.sync="dialog.exitPoint" width="50%">
        <div>
          确定废弃这个点吗？
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.exitPoint = false">取 消</el-button>
          <el-button type="primary" @click="exitPointFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除点对话框 -->
      <el-dialog title="删除点" :visible.sync="dialog.delPoint" width="50%">
        <div>
          确定删除这个点吗？
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delPoint = false">取 消</el-button>
          <el-button type="primary" @click="delPointFun">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </main>
</template>

<script>
import * as api from '../../api/private/unit'
import * as api2 from '../../api/private/posit'
import UnitForm from './formComponent/unit_form.vue'
import PointForm from './formComponent/point_form.vue'
export default {
  data() {
    return {
      TYPE: 0,
      queryData: null,
      unitType: [],
      unitList: [],
      dialog: {
        addUnit: false,
        setUnit: false,
        exitUnit: false,
        delUnit: false,
        addPoint: false,
        setPoint: false,
        exitPoint: false,
        delPoint: false
      },
      addUnitData: {
        name: '', //
        tcsId: '', //
        type: '', //
        mode: '',
        frequency: '',
        num: '1',
        interval: '',
        installationPersonnel: '',
        installationTime: '',
        maintenancePersonnel: '',
        reservedRate: '',
        displacementReferenceValue: '',
        remark: '',
        pointPrefix: '',
        pointNum: '',
        startNumber: '1'
      },
      setUnitData: {
        name: '', //
        tcsId: '', //
        type: '', //
        mode: '',
        frequency: '',
        num: '1',
        interval: '',
        installationPersonnel: '',
        installationTime: '',
        maintenancePersonnel: '',
        reservedRate: '',
        displacementReferenceValue: '',
        remark: '',
        pointPrefix: '',
        pointNum: '',
        startNumber: '1'
      },
      addPointData: {
        elementId: '',
        name: '',
        remark: ''
      },
      setPointData: {
        elementId: '',
        name: '',
        remark: ''
      },
      collapseValue: -1
    }
  },
  components: { UnitForm, PointForm },
  created() {
    this.unitType = this.$store.state.unit
    this.$ebs.$on('project_change', this.back)
  },
  mounted() {
    this.queryData = this.$route.query
    window.localStorage.setItem('startMileage', JSON.stringify(this.queryData.startMileage))
    this.getUnitList()
  },
  methods: {
    back() {
      this.$router.back()
    },
    async getUnitList() {
      let req = { tcsId: this.queryData.id, type: this.TYPE }
      let res = await api.getUnitList(req)
      if (res.code == 0) {
        this.unitList = res.data.map(item => {
          item.pointsList = []
          item.loading = false
          return item
        })
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 获取单元

    // 新建单元元按下
    addUnitTypeClick() {
      this.dialog.addUnit = true
    },
    // 新建的单元函数
    async addUnitFun() {
      let bool = this.$refs.addUnitRef.validate()
      if (bool) {
        let req = this.addUnitData
        req.tcsId = this.queryData.id
        let res = await api.addUnit(req)
        if (res.code == 0) {
          this.dialog.addUnit = false
          this.$refs.addUnitRef.resetFields()
          this.getUnitList()
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 修改单元按下
    setUnitClick(row) {
      this.setUnitData = JSON.parse(JSON.stringify(row))
      // this.setGroupForm(row, 'setUnitRef')
      this.dialog.setUnit = true
    },
    // 通知修改表单改变
    setGroupForm(data, ref) {
      // 获取指定组件并加工数据为可用
      this.$nextTick(item => {
        let catchArray = this.$refs[ref ? ref : 'lookGroup'].catchArray
        catchArray.installationPersonnelData = data.installationPersonnel
        catchArray.maintenancePersonnelData = data.maintenancePersonnel
      })
    },
    // 修改单元函数
    async setUnitFun() {
      let bool = this.$refs.setUnitRef.validate()
      if (bool) {
        let req = this.setUnitData
        let res = await api.setUnit(req)
        if (res.code == 0) {
          this.dialog.setUnit = false
          this.getUnitList()
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 删除单元按下
    delUnitClick(row) {
      this.catchUnit = row
      this.dialog.delUnit = true
    },
    // 删除单元函数
    async delUnitFun() {
      let req = [this.catchUnit.id]
      let res = await api.delUnit(req)
      if (res.code == 0) {
        this.dialog.delUnit = false
        this.getUnitList()
      } else {
        this.$msg.error(res.msg)
      }
    },

    // 获取单元数据
    async getUnitData(item) {
      let item_ = item
      item_.pointsList = []
      item_.loading = true
      let req = { elementId: item.id }
      let res = await api2.getPointList(req)
      if (res.code == 0) {
        setTimeout(() => {
          item_.loading = false
          item_.pointsList = res.data
        }, 200)
      } else {
        item_.loading = false
        this.$msg.error(res.msg)
      }
    },
    collapseChange(str) {
      let itemData = this.unitList[str]
      itemData && this.getUnitData(itemData)
      // itemData && this.getUnitData(this.unitList[str])
    },
    unitTypeRowClick(row) {
      if (row.type == this.TYPE) return
      this.collapseValue = -1
      this.TYPE = row.type
      this.getUnitList()
    },
    // 关闭单元测量按下
    exitUnitClick(row) {
      this.catchUnit = row
      this.dialog.exitUnit = true
    },
    // 关闭单元测量函数
    async exitUnitFun() {
      let req = [this.catchUnit.id]
      let res = await api2.exitUnit(req)
      if (res.code == 0) {
        this.dialog.exitUnit = false
        this.getUnitList()
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 点
    // 新建点按下
    addPointClick(data) {
      this.catchUnitData = data
      this.dialog.addPoint = true
    },
    // 新建点函数
    async addPointFun() {
      let bool = this.$refs.addPointRef.validate()
      if (bool) {
        let req = this.addPointData
        req.elementId = this.catchUnitData.id
        let res = await api2.addPoint(req)
        if (res.code == 0) {
          this.dialog.addPoint = false
          this.$refs.addPointRef.resetFields()
          this.getUnitData(this.catchUnitData)
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 修改点按下
    setPointClick(row, data) {
      this.dialog.setPoint = true
      this.catchUnitData = data
      this.setPointData = JSON.parse(JSON.stringify(row))
    },
    // 修改点函数
    async setPointFun() {
      let req = this.setPointData
      let res = await api2.setPoint(req)
      if (res.code == 0) {
        this.dialog.setPoint = false
        this.getUnitData(this.catchUnitData)
      } else {
        this.msg.error(res.msg)
      }
    },
    exitPointClick(row, data) {
      this.dialog.exitPoint = true
      this.catchUnitData = data
    },
    exitPointFun() {
      console.log('执行废弃')
      this.dialog.exitPoint = false
    },
    // 删除点按下
    delPointClick(row, data) {
      this.catchPointData = row
      this.catchUnitData = data
      this.dialog.delPoint = true
    },
    // 删除点函数
    async delPointFun() {
      let req = [this.catchPointData.id]
      let res = await api2.delPoint(req)
      if (res.code == 0) {
        this.dialog.delPoint = false
        this.getUnitData(this.catchUnitData)
      } else {
        this.msg.error(res.msg)
      }
    }
  },
  destroyed() {
    this.$ebs.$off('project_change', this.back)
  }
}
</script>


<style lang="scss" scoped>
.title {
  margin-left: 20px;
  .mini {
    font-size: 0.8em;
    color: rgb(80, 80, 80);
  }
}
.pointBox {
  height: 300px;
}
.rightBodyStyle {
  min-width: 700px;
}
.unitName {
  max-width: 200px;
  margin-right: 45px;
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
  white-space: nowrap; //文本不会换行
}
</style>
